@import "~@/styles/variables.scss";

/* visu-common */
.visu-body {
  background-color: #000000;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}

.visu-container {
  width: 100%;
  background-image: url('~@/assets/module_images/visu/visu-bg.png');
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
  color: $visuColorWhite;
  position: relative;
  font-family: MicrosoftYaHei;

  .visu-content {
    width: 100%;
    height: 85%; // 1879px
    display: flex;
    position: relative;
    z-index: 10;
    justify-content: space-around;
  }

  .visu-bottom {
    height: 1%; // 24.3
    width: 100%;
  }

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.visu-module-bg-1-1 {
  background-image: url('~@/assets/module_images/visu/visu-module-bg-1-1.png');
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
}

.visu-module-bg-1-2 {
  background-image: url('~@/assets/module_images/visu/visu-module-bg-1-2.png');
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
}

.visu-module-bg-1-3 {
  background-image: url('~@/assets/module_images/visu/visu-module-bg-1-3.png');
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
}

.visu-module-bg-1-4 {
  background-image: url('~@/assets/module_images/visu/visu-module-bg-1-4.png');
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
}

.visu-module-bg-2-1 {
  background-image: url('~@/assets/module_images/visu/visu-module-bg-2-1.png');
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
}

.visu-module-bg-2-5 {
  background-image: url('~@/assets/module_images/visu/visu-module-bg-2-5.png');
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
}

.visu-mini-module-bg {
  background-image: url('~@/assets/module_images/visu/visu-mini-module-bg.png');
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
}

.visu-module-slice {
  background-image: url('~@/assets/module_images/visu/visu-module-slice.png');
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
}

.table-header {
  color: $visuTableHeaderColor;
  background-color: $visuTableHeaderBgColor;
  font-weight: bold;
  font-size: 2rem;
  display: flex;
  text-align: center;
}

.table-tr-bg {
  background-color: $visuTableTrBgColor;
}

.white-space {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.module-default-top {
  margin-top: 1.67rem !important;
}

/* flex-common */

.flex {
  display: flex;
}

.flex-center {
  display: flex;
  justify-content: center;
}

.flex-around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.flex-warp {
  flex-wrap: wrap;
}

.warp {
  flex-wrap: wrap;
}

.flex-column-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-column-start {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.flex-column-end {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.flex-column-between {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.flex-column-around {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

/* width/height-common */

.width-1 {
  width: 1% !important;
}

.width-2 {
  width: 3% !important;
}

.width-3 {
  width: 3% !important;
}

.width-7 {
  width: 7% !important;
}

.width-8 {
  width: 8% !important;
}

.width-10 {
  width: 10% !important;
}

.width-12 {
  width: 12% !important;
}

.width-15 {
  width: 15% !important;
}

.width-16 {
  width: 16% !important;
}

.width-17 {
  width: 17% !important;
}

.width-20 {
  width: 20% !important;
}

.width-22 {
  width: 22% !important;
}

.width-23 {
  width: 23% !important;
}

.width-24 {
  width: 24% !important;
}

.width-25 {
  width: 25% !important;
}

.width-26 {
  width: 26% !important;
}

.width-27 {
  width: 27% !important;
}

.width-28 {
  width: 28% !important;
}

.width-29 {
  width: 29% !important;
}

.width-30 {
  width: 30% !important;
}

.width-32 {
  width: 32% !important;
}

.width-35 {
  width: 35% !important;
}

.width-40 {
  width: 40% !important;
}

.width-43 {
  width: 43% !important;
}

.width-45 {
  width: 45% !important;
}

.width-48 {
  width: 48% !important;
}

.width-50 {
  width: 50% !important;
}

.width-55 {
  width: 55% !important;
}

.width-60 {
  width: 60% !important;
}

.width-65 {
  width: 65% !important;
}

.width-70 {
  width: 70% !important;
}

.width-80 {
  width: 80% !important;
}

.width-85 {
  width: 85% !important;
}

.width-90 {
  width: 90% !important;
}

.width-92 {
  width: 92% !important;
}

.width-94 {
  width: 94% !important;
}

.width-95 {
  width: 95% !important;
}

.width-96 {
  width: 96% !important;
}

.width-98 {
  width: 98% !important;
}

.width-100 {
  width: 100% !important;
}

.height-3 {
  height: 3% !important;
}

.height-4 {
  height: 4% !important;
}

.height-4-8 {
  height: 4.8% !important;
}

.height-5 {
  height: 5% !important;
}

.height-7 {
  height: 7% !important;
}

.height-8 {
  height: 8% !important;
}

.height-8-33 {
  height: 8.33% !important;
}

.height-9-67 {
  height: 9.67% !important;
}

.height-10 {
  height: 10% !important;
}

.height-12 {
  height: 12% !important;
}

.height-12-5 {
  height: 12.5% !important;
}

.height-16-66 {
  height: 16.66% !important;
}

.height-14-2 {
  height: 14.2% !important;
}

.height-15 {
  height: 15% !important;
}

.height-17 {
  height: 17% !important;
}

.height-18 {
  height: 18% !important;
}

.height-20 {
  height: 20% !important;
}

.height-22 {
  height: 22% !important;
}

.height-24 {
  height: 24% !important;
}

.height-25 {
  height: 25% !important;
}

.height-27 {
  height: 27% !important;
}

.height-30 {
  height: 30% !important;
}

.height-35 {
  height: 35% !important;
}

.height-40 {
  height: 40% !important;
}

.height-42 {
  height: 42% !important;
}

.height-45 {
  height: 45% !important;
}

.height-50 {
  height: 50% !important;
}

.height-55 {
  height: 55% !important;
}

.height-56 {
  height: 56% !important;
}

.height-60 {
  height: 60% !important;
}

.height-65 {
  height: 65% !important;
}

.height-70 {
  height: 70% !important;
}

.height-70-3 {
  height: 70.3% !important;
}

.height-75 {
  height: 75% !important;
}

.height-80 {
  height: 80% !important;
}

.height-85 {
  height: 85% !important;
}

.height-86 {
  height: 86% !important;
}

.height-90 {
  height: 90% !important;
}

.height-96 {
  height: 96% !important;
}

.height-100 {
  height: 100% !important;
}

.height-2-5v {
  height: 2.5vh !important;
}

.height-2-8v {
  height: 2.8vh !important;
}

.height-3v {
  height: 3vh !important;
}

.height-3-5v {
  height: 3.5vh !important;
}

.height-4v {
  height: 4vh !important;
}

.height-5v {
  height: 5vh !important;
}

.wheight-100 {
  height: 100% !important;
  width: 100% !important;
}

/* margin-common */

.margin-top-0 {
  margin-top: 0 !important;
}

.margin-left-1 {
  margin-left: 1% !important;
}

.margin-left-2 {
  margin-left: 2% !important;
}

.margin-left-3 {
  margin-left: 3% !important;
}

.margin-left-5 {
  margin-left: 5% !important;
}


.margin-left-10 {
  margin-left: 10% !important;
}


.margin-left-40 {
  margin-left: 40% !important;
}

.margin-left-50 {
  margin-left: 50% !important;
}

.margin-top-1p {
  margin-top: 1% !important;
}

.margin-top-2p {
  margin-top: 2% !important;
}

.margin-top-3p {
  margin-top: 3% !important;
}

.margin-top-5p {
  margin-top: 5% !important;
}

.margin-top-30p {
  margin-top: 30% !important;
}

.margin-top-100 {
  margin-top: 100% !important;
}

.margin-right-3 {
  margin-top: 3% !important;
}


.top-90 {
  top: 90% !important;
}

.padding-top-2p {
  padding-top: 2% !important;
}

.padding-left-1p {
  padding-left: 1% !important;
}

.padding-left-2p {
  padding-left: 2% !important;
}

.margin-center {
  margin: 0 auto;
}

.center {
  text-align: center !important;
  margin: 0 auto;
}

.left {
  text-align: left !important;
}

.right {
  text-align: right !important;
}

/* vb-common */

.vb > .vb-dragger {
  z-index: 5;
  width: 1.5rem;
  right: 0;
}

.vb > .vb-dragger > .vb-dragger-styler {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: rotate3d(0, 0, 0, 0);
  transform: rotate3d(0, 0, 0, 0);
  -webkit-transition: background-color 100ms ease-out,
  margin 100ms ease-out,
  height 100ms ease-out;
  //transition:
  //  background-color 100ms ease-out,
  //  margin 100ms ease-out,
  //  height 100ms ease-out;
  background-color: rgba(48, 121, 244, .1);
  margin: 5px 5px 5px 0;
  border-radius: 20px;
  height: calc(100% - 10px);
  display: block;
}

.vb.vb-scrolling-phantom > .vb-dragger > .vb-dragger-styler {
  background-color: rgba(48, 121, 244, .3);
}

.vb > .vb-dragger:hover > .vb-dragger-styler {
  background-color: rgba(48, 121, 244, .5);
  margin: 0px;
  height: 100%;
}

.vb.vb-dragging > .vb-dragger > .vb-dragger-styler {
  background-color: rgba(48, 121, 244, .5);
  margin: 0px;
  height: 100%;
}

.vb.vb-dragging-phantom > .vb-dragger > .vb-dragger-styler {
  background-color: rgba(48, 121, 244, .5);
}

/* color-common */

.add-data-color-1 {
  color: $visuDataColor !important;
}

.add-data-color-2 {
  color: $visuDataColor2 !important;
}

.add-data-color-3 {
  color: $visuDataColor3 !important;
}

.add-data-color-4 {
  color: $visuDataColor4 !important;
}

.add-data-color-5 {
  color: $visuDataColor5 !important;
}

.add-data-color-6 {
  color: #7896D1 !important;
}

.add-data-bcolor-1 {
  color: $visuDataColor !important;
  font-weight: bold;
}

.add-data-bcolor-2 {
  color: $visuTableHeaderColor !important;
  font-weight: bold;
}

.vedio-full {
  object-fit: fill;
}

.show {
  display: block !important;
}

.hide {
  display: none;
}

.border-white {
  border: 1px solid #ffffff;
}

.border-red {
  border: 1px solid red;
}

.border-yellow {
  border: 1px solid yellow;
}

.parent-box {
  width: 100%;
  height: 100%;
}

.background-img-100 {
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
}

.cursor {
  cursor: pointer;
}

.text-center {
  text-align: center;
}

.bold {
  font-weight: bold;
}

.normal {
  font-weight: normal;
}

/* font-common */

.font-size-1-33 {
  font-size: 1.3rem;
}

.font-size-1-5 {
  font-size: 1.5rem;
}

.font-size-1-67 {
  font-size: 1.67rem;
}

.font-size-1-8 {
  font-size: 1.8rem !important;
}

.font-size-2 {
  font-size: 2rem;
}

.font-size-2-33 {
  font-size: 2.33rem;
}

.font-size-2-67 {
  font-size: 2.67rem;
}

.font-size-2-8 {
  font-size: 2.8rem;
}

.font-size-3 {
  font-size: 3rem;
}

.font-size-3-33 {
  font-size: 3.33rem;
}

.font-size-4-33 {
  font-size: 4.33rem;
}

.font-size-4-67 {
  font-size: 4.67rem;
}

/* position-common */

.relative-parent {
  width: 100%;
  height: 100%;
  position: relative;
}

.position-r {
  position: relative;
}

.position-a {
  position: absolute;
}

.position-l-0 {
  left: 0;
}

.position-l-2 {
  left: 2%;
}

.position-l-4 {
  left: 4%;
}

.position-l-30 {
  left: 30%;
}


.position-l-35 {
  left: 35%;
}

.position-l-40 {
  left: 40%;
}

.position-l-45 {
  left: 45%;
}

.position-r-0 {
  right: 0;
}

.position-r-4 {
  right: 4%;
}

.position-t-0 {
  top: 0;
}

.position-t-1 {
  top: 1% !important;
}

.position-t-5 {
  top: 5% !important;
}

.position-t-15 {
  top: 15%;
}

.position-t-35 {
  top: 35%;
}

.position-b-0 {
  bottom: 0;
}


.position-t-10 {
  top: 10%;
}

.position-t-15 {
  top: 15%;
}

.position-t-30 {
  top: 30%;
}

.position-t-50 {
  top: 50%;
}

.position-b-5 {
  bottom: 5%;
}

.position-lt-0 {
  left: 0;
  top: 0;
}

.position-lb-0 {
  left: 0;
  bottom: 0;
}

.position-rt-0 {
  right: 0;
  top: 0;
}

.position-tb-0 {
  right: 0;
  bottom: 0;
}

/* z-index-common */
.z-index-1 {
  z-index: 1;
}

.z-index-5 {
  z-index: 5;
}

.z-index-10 {
  z-index: 10;
}

.z-index-20 {
  z-index: 20;
}

.of-y-hide {
  overflow-y: hidden;
}

.of-y-auto {
  overflow-y: auto;
}

.scroll-list::-webkit-scrollbar {
  width: 2px; /* 设置滚动条的宽度 */
}


.visu-mini-bg-1 {
  background-image: url('~@/assets/module_images/visu/visu-mini-module-bg-1.png');
}

.visu-mini-bg-1-selected {
  background-image: url('~@/assets/module_images/visu/visu-mini-module-bg-1-selected.png');
}

.map-bg {
  background-image: url('~@/assets/module_images/visu/map-bg.png');
}

.tr-content:nth-child(2n-1) {
  background: rgba(21, 113, 255, 0.1);
}

.tr-content:hover {
  background: rgba(21, 113, 255, 0.32);
  border-top: 2px solid #1571FF;
  border-bottom: 2px solid #1571FF;
  font-weight: bold;
}

.module-header {
  background-image: url('~@/assets/module_images/visu/visu-module-header-1.png');
}

.module-header-2 {
  background-image: url('~@/assets/module_images/visu/visu-module-header-2.png');
}

.module-header-3 {
  background-image: url('~@/assets/module_images/visu/visu-module-header-3.png');
}

.visu-table-title-1 {
  background-image: url('~@/assets/module_images/visu/visu-table-title-1.png');
}

.visu-table {
  position: relative;
}

.visu-table:before {
  position: absolute;
  left: 0;
  bottom: 0;
  content: "";
  width: 5.33rem;
  height: 4.625rem;
  background-image: url('~@/assets/module_images/visu/left-down.png');
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
}

.visu-table:after {
  position: absolute;
  right: 0;
  bottom: 0;
  content: "";
  width: 5.33rem;
  height: 4.625rem;
  background-image: url('~@/assets/module_images/visu/right-down.png');
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
}

.default-module-bg {
  background: rgba(0, 100, 255, 0.2);
  height: calc(100% - 4.83rem);
  width: 100%;
}

.default-module-bg-color {
  background: rgba(0, 100, 255, 0.2);
}

.default-module-header {
  height: 4.83rem;
  line-height: 4.83rem;
  text-align: center;
}

.color-grey {
  color: grey !important;
}

.color-white {
  color: white !important;
}

.map-tier {
  position: absolute;
  width: 80%;
  left: 10%;
  top: 45%;
  height: 0;
  padding-bottom: 85%;
  background-image: url('~@/assets/module_images/visu/circle-tier-1.png');
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
  transform-style: preserve-3d;
  transform: rotateX(85deg);
  opacity: .7;
  animation: map-tier-circle 20s linear infinite; // 要想实现平行转圈，宽高必须相同
}

@keyframes map-tier-circle {
  0% {
    transform: rotateX(85deg) rotateZ(0);
  }
  100% {
    transform: rotateX(85deg) rotateZ(360deg);
  }
}

.visu-module-slice {
  width: 80%;
  height: .5rem;
  margin: 0 auto;
  background-image: url('~@/assets/module_images/visu/visu-module-slice.png');
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
}

.visu-module-title {
  color: $visuColorWhite;
  font-size: 2rem;
  font-weight: bold;
  height: 3.54rem;
  line-height: 3.54rem;
  display: flex;
  justify-content: left;
  width: 90%;
  margin-left: 3%;
  margin-top: 1rem;

  .dot {
    width: .67rem;
    height: .67rem;
    background-color: $visuColorWhite;
    border-radius: 50%;
    margin-top: 1.435rem;
  }

  .text {
    text-align: left;
    margin-left: 2%;
    height: 3.54rem;
    line-height: 3.54rem;
  }

  .suffix {
    width: 30%;
    height: 0.58rem;
    margin-top: 2.5rem;
    margin-left: 2%;
    background-image: url('~@/assets/module_images/visu/visu-module-title-suffix.png');
    -moz-background-size: 100% 100%;
    background-size: 100% 100%;
  }
}


.visu-module-title-2 {
  color: $visuColorWhite;
  font-size: 1.8rem;
  height: 3.54rem;
  line-height: 3.54rem;
  display: flex;
  justify-content: left;
  width: 90%;
  margin-left: 3%;
  margin-top: 0;

  .dot {
    width: .67rem;
    height: .67rem;
    background-color: $visuColorWhite;
    border-radius: 50%;
    margin-top: 1.435rem;
  }

  .text {
    text-align: left;
    margin-left: 2%;
    height: 3.54rem;
    line-height: 3.54rem;
    font-weight: bold;
  }

  .suffix {
    width: 30%;
    height: 0.58rem;
    margin-top: 2rem;
    margin-left: 2%;
    background-image: url('~@/assets/module_images/visu/visu-module-title-suffix.png');
    -moz-background-size: 100% 100%;
    background-size: 100% 100%;
  }
}

.visu-module-content {
  height: calc(100% - 4.54rem);
}

.visu-module-content-2 {
  height: calc(33.3% - 6.21rem);
}

.module-data-item {
  background-image: url('~@/assets/module_images/visu/data-bg-1.png');
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
  position: relative;

  .module-data {
    position: absolute;
    top: -2.71rem;
    left: 0;
    width: 100%;
    text-align: center;
    line-height: 7.04rem;
    font-weight: bold;
    color: $visuTableHeaderColor;
  }

  .module-text {
    position: absolute;
    top: 80%;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 1.8rem;
  }
}

.module-data-item-2 {
  position: relative;

  .img-bg {
    height: 100%;
    width: 100%;
    background-image: url('~@/assets/module_images/visu/data-bg-2.png');
    -moz-background-size: 100% 100%;
    background-size: 100% 100%;
    position: absolute;
    z-index: 1;
  }

  .module-data {
    width: 100%;
    text-align: center;
    line-height: 4.83rem;
    font-size: 3.67rem;
    font-weight: bold;
    line-height: 4.83rem;
    position: absolute;
    z-index: 2;
    top: 30%;
  }

  .module-text {
    width: 100%;
    text-align: center;
    font-size: 1.67rem;
    position: absolute;
    z-index: 2;
    top: 60%;
  }
}

.ll-module-title {
  width: 100%;
  height: 6%;
  position: relative;

  .ll-module-text {
    position: absolute;
    z-index: 10;
    text-align: center;
    letter-spacing: .1rem;
  }

  .ll-module-left-bg {
    position: absolute;
    z-index: 5;
    left: 25%;
    background: linear-gradient(180deg, transparent 0%, RGBA(21, 113, 255, 0.3) 30%, RGBA(23, 128, 247, 0.1) 100%);
    transform: skewX(38deg);
  }

  .ll-module-right-bg {
    position: absolute;
    z-index: 5;
    left: 45%;
    background: linear-gradient(180deg, transparent 0%, RGBA(21, 113, 255, 0.3) 30%, RGBA(21, 113, 255, 0.1) 100%);
    transform: skewX(-38deg);
  }
}

.text-scale:hover {
  cursor: pointer;
  transition: all 1.3s;
  transform: scale(1.2, 1.2) rotateX(360deg);
  -ms-transform: scale(1.3, 1.2) rotateX(360deg); // IE 9
  -webkit-transform: scale(1.2, 1.2) rotateX(360deg); // Safari and Chrome
}

.text-scale-y:hover {
  cursor: pointer;
  transition: all 1.3s;
  transform: scaleY(1.2) rotateX(360deg);
  -ms-transform: scaleY(1.2) rotateX(360deg); // IE 9
  -webkit-transform: scaleY(1.2) rotateX(360deg); // Safari and Chrome
}

.text-scale-x:hover {
  cursor: pointer;
  transition: all 1.3s;
  transform: scaleX(1.2) rotateX(360deg);
  -ms-transform: scaleX(1.2) rotateX(360deg); // IE 9
  -webkit-transform: scaleX(1.2) rotateX(360deg); // Safari and Chrome
}

.text-content-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 5;
  font-size: 1.67rem;
  letter-spacing: .17rem;
  text-shadow: .2rem .2rem .2rem grey;
}

.text-content-bg-bottom-2 {
  width: 100%;
  height: 20%;
  position: absolute;
  bottom: 10%;
  z-index: 10;
  font-size: 1.67rem;
  letter-spacing: .17rem;
  text-shadow: .2rem .2rem .2rem grey;
}

.text-content-bg-bottom {
  width: 100%;
  height: 20%;
  position: absolute;
  bottom: -5%;
  z-index: 10;
  font-size: 1.67rem;
  letter-spacing: .17rem;
  text-shadow: .2rem .2rem .2rem grey;
}

.el-carousel-inner {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  min-width: 0;
  overflow: hidden;
}

.slice-bottom {
  height: 0.33rem;
  background-image: url('~@/assets/module_images/visu/visu-slice-bottom.png');
}

.prex-inner1 {
  background-image: url('~@/assets/module_images/visu/visu-prex-1.png');
}

.prex-inner2 {
  background-image: url('~@/assets/module_images/visu/visu-prex-2.png');
}

.prex-inner3 {
  background-image: url('~@/assets/module_images/visu/visu-prex-3.png');
}

.prex-inner4 {
  background-image: url('~@/assets/module_images/visu/visu-prex-4.png');
}

.prex-inner5 {
  height: 1rem;
  width: 1rem;
  background-image: url('~@/assets/module_images/visu/visu-prex-5.png');
}

.visu-prex-21 {
  height: 4.33rem;
  width: 4.33rem;
  background-image: url('~@/assets/module_images/visu/visu-prex-21.png');
}

.visu-prex-22 {
  height: 4.33rem;
  width: 4.33rem;
  background-image: url('~@/assets/module_images/visu/visu-prex-22.png');
}

.visu-prex-23 {
  height: 4.33rem;
  width: 4.33rem;
  background-image: url('~@/assets/module_images/visu/visu-prex-23.png');
}

.chart-p {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 10;
}

.visu-header-left {
  height: 82.7%;
  background-image: url('~@/assets/module_images/visu/visu-header-left.png');
}

.visu-header-left-selected {
  background-image: url('~@/assets/module_images/visu/visu-header-left-selected.png');
}

.visu-header-left-1 {
  background-image: url('~@/assets/module_images/visu/visu-header-left-1.png');
}

.visu-header-left-1-selected {
  background-image: url('~@/assets/module_images/visu/visu-header-left-1-selected.png');
}

.visu-header-right {
  height: 82.7%;
  background-image: url('~@/assets/module_images/visu/visu-header-right.png');
}

.visu-header-right-selected {
  background-image: url('~@/assets/module_images/visu/visu-header-right-selected.png');
}

.visu-header-right-1 {
  margin-left: -10%;
  background-image: url('~@/assets/module_images/visu/visu-header-right-1.png');
}

.visu-header-right-1-selected {
  background-image: url('~@/assets/module_images/visu/visu-header-right-1-selected.png');
}

.add-bg-color-1 {
  background: rgba(21, 113, 255, .4) !important;
}

table {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  z-index: 199;
  font-size: 1rem;
}

th {
  font-size: 1.5rem;
  font-weight: bold;
  height: 4.2vh;
  line-height: 4.2vh;
  background-color: rgba(5, 58, 81, 1);
}

td {
  height: 4.6vh;
  line-height: 4.6vh;
  font-size: 1.5rem;
  max-width: 20vw;
}

table, th, td {
  border: 1px solid $visuColorWhite;
}

tr:hover {
  background-color: rgba(121, 121, 121, 0.5);
}

td:hover {
  cursor: pointer;
}

.font-1-2 {
  font-size: 1.2rem;
}

.font-1-5 {
  font-size: 1.5rem;
}

.font-2 {
  font-size: 2rem;
}
